{% extends "base.html" %}
{% block title %}{{region_name}}{% endblock %}
{% block inner_scripts %}
<script type='text/javascript'>
  google.setOnLoadCallback(drawCharts);
  function drawCharts() {
    {
      $.getJSON('/expenses',
                {'region': '{{region_code}}',
                 'dim': 'customer'},
                function(sourceData) {
                  var table = new google.visualization.Table(document.getElementById('customers_table'));
                  table.draw(sumJSON2DataTable(sourceData), {showRowNumber: true, allowHtml: true});
                });
    }
    {
      $.getJSON('/expenses',
                {'region': '{{region_code}}',
                 'dim': 'supplier'},
                function(sourceData) {
                  var table = new google.visualization.Table(document.getElementById('suppliers_table'));
                  table.draw(sumJSON2DataTable(sourceData), {showRowNumber: true, allowHtml: true});
                });
    }
    {
      $.getJSON('/expenses',
                {'region': '{{region_code}}',
                 'dim': 'type'},
                function(sourceData) {
                  var data = sumJSON2DataTable(sourceData);
                  drawTypesPieChart('categories_chart', data);
                  var table = new google.visualization.Table(document.getElementById('categories_table'));
                  table.draw(data, {showRowNumber: true, allowHtml: true});
                });
    }
    {
      $.getJSON('/time_chart',
                {'region': '{{region_code}}'},
                function(sourceData) {
                  drawTimeChart('months_bar_chart', sumJSON2DataTable(sourceData));
                });
    }
  }
</script>
{% endblock %}
{% block regions-selected %}selected{% endblock %}
{% block content %}
<h2 class="center_title">{{region_name}}</h2>

<div class="table_wrapper">
    <h2>Крупнейшие расходователи средств в регионе</h2>
    <div class="cb"></div>
     <div id="customers_table"></div>
    <div class="cb"></div>
</div>

<div class="table_wrapper">
    <h2>Крупнейшие поставщики региона</h2>
    <div class="cb"></div>
     <div id="suppliers_table"></div>
    <div class="cb"></div>
</div>

<div class="table_wrapper">
  <h2>Расходы по видам продукции и услуг</h2>
    <div class="cb"></div>
  <table>
    <tr>
      <td style="vertical-align: top;">
        <div id="categories_chart"></div>
      </td>
      <td style="vertical-align: top;">
        <div id="categories_table"></div>
      </td>
    </tr>
  </table>
    <div class="cb"></div>
</div>
<div class="table_wrapper">
  <h2>Расходы за период с {{config.start_date}} по {{config.actuality_date}}</h2>
  <div class="cb"></div>
  <div id="months_bar_chart"></div>
  <div class="cb"></div>
</div>
<!-- / content -->
{% endblock %}
